/*新闻详情页*/
import React from 'react';
import {Row, Col, BackTop, Button, notification} from 'antd';
import PCHeader from './pc_header';
import PCFooter from './pc_footer';
import PCNewsImageBlock from './pc_news_image_block';
import ComponentComments from '../comments';
import '../../../css/pc_news_deatils.css'
import {message} from "antd/lib/index";

export default class PCNewsDetails extends React.Component {
    constructor() {
        super();
        this.state = {
            newsItem: ''
        };
    };

    componentDidMount() {
        var myFetchOptions = {
            method: 'GET'
        };
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnewsitem&uniquekey="
            + this.props.params.uniquekey, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({newsItem: json});
                document.title = this.state.newsItem.title + " - React News";
            })
    };

    // 载入html
    createMarkup() {
        return {__html: this.state.newsItem.pagecontent};
    };

    // 文章收藏
    addUserCollection() {
        var myFetchOptions = {
            method: 'GET'
        };
        if (!localStorage.userid || localStorage.userid == '') {
            message.error('请登录后再进行收藏~')
            return
        }
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=uc&userid="
            + localStorage.userid + "&uniquekey=" + this.props.params.uniquekey, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                //收藏成功以后进行一下全局的提醒
                notification['success']({message: 'ReactNews提醒', description: '收藏此文章成功'});
            });
    };

    render() {
        return (
            <div>
                <PCHeader></PCHeader>
                <Row>
                    <Col span={2}></Col>
                    {/*文章内容*/}
                    <Col span={14} className="container">
                        <div className="articleContainer" dangerouslySetInnerHTML={this.createMarkup()}></div>
                        {/*收藏按钮*/}
                        <div style={{textAlign: 'right', paddingBottom: '10px'}}>
                            <Button type="primary" htmlType="button"
                                    onClick={this.addUserCollection.bind(this)}>收藏该文章</Button>
                        </div>
                        <hr/>
                        <ComponentComments uniquekey={this.props.params.uniquekey}/>
                    </Col>

                    {/*右边新闻块*/}
                    <Col span={6}>
                        <PCNewsImageBlock count={20} type="top" width="100%" cardTitle="相关新闻" imageWidth="150px"/>
                    </Col>
                    <Col span={2}></Col>
                </Row>
                <PCFooter></PCFooter>
                {/*回到顶部*/}
                <BackTop/>
            </div>
        );
    };
};
